<template>
  <div v-loading="!goods">
    <el-descriptions
      v-if="goods"
      :column="1"
      border
      label-class-name="text-right"
    >
      <el-descriptions-item label="SPU ID">{{ goods.id }}</el-descriptions-item>
      <el-descriptions-item label="商品名称">{{ goods.name }}</el-descriptions-item>
      <el-descriptions-item label="促销语">{{ goods.slogan }}</el-descriptions-item>
      <el-descriptions-item label="描述信息">{{ goods.description }}</el-descriptions-item>
      <el-descriptions-item label="关键词">{{ goods.keyword }}</el-descriptions-item>
      <el-descriptions-item label="货号">{{ goods.art_no }}</el-descriptions-item>
      <el-descriptions-item label="运费">
        <em-cell
          v-if="goods.shipTemplate"
          :title="goods.shipTemplate.name"
          class="pl-0"
        >
          <template #label>
            <div
              v-for="(mark,index) in goods.shipTemplate.mark"
              :key="index"
            >
              {{ mark }}
            </div>
          </template>
        </em-cell>
        <el-tag
          v-else
          size="mini"
        >免邮</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="商品分类">
        <formatter-view
          :format="{type:'breadcrumb'}"
          :row="goods"
          column="categoryTree"
        />
      </el-descriptions-item>
      <el-descriptions-item label="品牌">{{ goods['brand.name'] }}</el-descriptions-item>
      <el-descriptions-item label="商品封面图">
        <el-avatar
          shape="square"
          :size="100"
          :src="goods.thumb"
        />
      </el-descriptions-item>
      <el-descriptions-item label="轮播组图">
        <div class="d-flex">
          <el-avatar
            v-for="(pic,index) in goods.album"
            :key="index"
            shape="square"
            :size="100"
            :src="pic.url"
            style="margin-right:10px"
          />
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="单品列表">
        <em-goods-card
          v-for="(sku,index) in goods.goods"
          :key="index"
          :price="sku.price"
          :origin-price="sku.market_price"
          :desc="sku.subtitle"
          :title="sku.name"
          :thumb="sku.thumb"
        >
          <template #tags>
            <el-tag
              class="mr-2"
              size="mini"
            >库存：{{ sku.stock }}</el-tag>
            <el-tag
              v-if="sku.goods_no"
              class="mr-2"
              size="mini"
            >商品编号：{{ sku.goods_no }}</el-tag>
          </template>
        </em-goods-card>
      </el-descriptions-item>
    </el-descriptions>
    <el-form
      ref="goodsForm"
      class="form-fixed"
      label-width="20%"
      label-suffix="："
      @submit.native.prevent
    >
      <fixed-box>
        <el-form-item>
          <div>
            <el-button
              type="primary"
              @click="onSubmit('pending')"
            >提交审核</el-button>
            <el-button @click="onSubmit('default')">存入仓库</el-button>
          </div>
          <div>
            <slot name="steps" />
            <el-button @click="goBack">返回</el-button>
          </div>
        </el-form-item>
      </fixed-box>
    </el-form>
  </div>
</template>

<script>
import FormatterView from '@/components/FormatterView'
import FixedBox from '@/layout/components/FixedBox'
export default {
  name: 'GoodsSubmitForm',
  components: {
    FormatterView,
    FixedBox
  },
  inject: ['goBack'],
  props: {
    value: {
      type: [Number, String],
      default: 0
    },
    formData: {
      type: Object,
      default: null
    },
    step: {
      type: Number,
      default: 0
    },
    steps: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      goods: null,
      skus: null
    }
  },
  watch: {
    formData(v, o) {
      if (v) {
        this.onMountData(v)
      }
    },
    video(v) {
      console.log('video is changed:', v)
    }
  },
  created() {
    this.onLoad()
  },
  mounted() {},
  methods: {
    onLoad() {
      this.$http.commodity.view(this.value).then(res => {
        this.onMountData(res.data)
      })
    },
    onSuccess(d) {
      console.log(d)
    },
    onNext() {
      this.$emit('next', this.index)
    },
    onMountData(data) {
      console.log(data)
      this.goods = data
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    onSubmit(type) {
      if (type === 'pending') {
        this.$http.commodity.onshelfHandle(this.value).then(res => {
          console.log('submit!')
          this.$emit('saved', this.value, type)
        })
      } else {
        this.$emit('saved', this.value, type)
      }
    }
  }
}
</script>
